<template>
	<view>
    <view class="handlePage">
      <text>页数：</text>
      <radio-group @change="changePage" v-model="page">
        <label>
          <radio value="1" :checked="page === 1" /><text>首页</text>
        </label>
        <label>
          <radio value="2" :checked="page === 2" /><text>非首页</text>
        </label>
      </radio-group>
    </view>
    <view class="handleStatus">
      <text>页数：</text>
      <radio-group @change="changeStatus" v-model="status">
        <label>
          <radio value="wait" :checked="status === 'wait'" /><text>wait</text>
        </label>
        <label>
          <radio value="loading" :checked="status === 'loading'" /><text>loading</text>
        </label>
        <label v-if="page === 2">
          <radio value="noMore" :checked="status === 'noMore'" /><text>noMore</text>
        </label>
        <label v-if="page === 1">
          <radio value="null" :checked="status === 'null'" /><text>null</text>
        </label>
        <label>
          <radio value="error" :checked="status === 'error'" /><text>error</text>
        </label>
      </radio-group>
    </view>
		<vf-loading :page="page" :status="status" @error="$$t.msg('你点击了错误！')" @nulls="$$t.msg('您点击了空！')" @noMore="$$t.msg('你点击了无更多')"></vf-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
        status: 'wait'
			};
		},
    
    methods: {
      
      changePage(e) {
        this.page = +e.detail.value;
      },
      
      changeStatus(e) {
        this.status = e.detail.value;
      }
    }
	}
</script>

<style lang="scss" scoped>
.handlePage, .handleStatus{
  display: flex;
  align-items: center;
  font-size: 28rpx;
  margin: 24rpx;
  &>text {
    flex-shrink: 0;
  }
  label {
    display: inline-flex;
    align-items: center;
  }
  radio{
    transform: scale(0.7);
  }
}
</style>
